import React, { useState } from 'react';
import Base from './base';
import { Common } from 'UtilsCommon';
import PropertyItem from './propertyItem';

export default React.memo((props) => {
    const { property, pageId, pageAxis } = Base.getProps(props);
    const [pageIndex, setPageIndex] = useState(property.initPageIndex || 1);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };

    let currentProperty;
    if (property.properties) {
        property.properties.forEach((p, i) => {
            const index = i + 1;
            p.id = Common.createGuid();
            const name = `${property.setPageIndexName}${index}`;
            pageAxis[name] = () => setPageIndex(index);
            if (index === pageIndex) currentProperty = p;
        });
    }

    if (!isVisible || !currentProperty) return null;

    const classNames = Base.getClassNames(property);

    if (property.isDiv) {
        return <div className={classNames} style={Base.setStyle(property.style)}>
            <PropertyItem property={currentProperty} view={property} pageId={pageId} />
        </div>;
    }
    return <PropertyItem property={currentProperty} view={property} pageId={pageId} />;
});